<template>
  <div>
    <!-- <router-link :to="{name:'Home',params:{gender:'男'},query:{search:'mmm'}}">home </router-link>
    <router-link to="/about">about </router-link>
    <router-link to="/mine">mine </router-link>
    <router-link to="/4564">WenBoXiong </router-link>
    <router-link to="/asdaw"> JiaWenBo </router-link>
    <router-link to="/xue/1/a/shi1">shibin1</router-link>
    <router-link to="/xue/2/a/shi2"> shibin2</router-link>-->
    <!-- 必须和在index.js里创建的 router 一样 -->

    <!-- 编程式导航 -->
    <!-- <button @click="homeFn">home</button>
    <button @click="aboutFn">about</button>
    <button @click="mineFn">mine</button>-->
    <!-- 声明式导航 -->
    <!-- <router-link :to="{gender:'nan'}"> home </router-link>
    <router-link :to="{name:'About',params:{name:'shibin'},query:{plan:'searcj'}}"> about </router-link>
    <router-link to="/about/1"> about </router-link>
    <router-link to="Mine"> mine </router-link>-->
    <!-- 嵌套路由 -->

    <router-link to="/">home</router-link>
    <router-link to="/about">about</router-link>
    <router-link to="/mine/1">mine</router-link>
    <hr />
    <!--组件不被销毁  缓存到网页  -->
    <!-- exclude 匹配的不缓存 -->
    <!-- include  匹配的缓存 -->
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

    <!-- 没有名字为 默认视图 -->
    <!-- 
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: 18,
      gender: "男"
    };
  },
  methods: {
    homeFn() {
      //通过路径跳转 要加/
      this.$router.push("/xiaoming");
      // this.$router.push({path:"/"})
      // this.$router.push({ name: "Home" });
    },
    aboutFn() {
      //通过name 对应name
      this.$router.push("About");
    },
    mineFn() {
      this.$router.push({
        // path: "/mine",
        name: "Mine",
        // params: { age: this.age }, //额外传参 在对象的params对象里
        query: { xingbie: this.gender } //查询条件 在地址栏可以看见查询条件
        // 如果要进行查询条件来跳转 可以用 name  也可用path
      });
      //以对象的形式来跳转会默认转化成路径
    }
  },
  mounted() {}
};
</script>

<style scoped>
</style>